<template>
    <div id="withdrawMoney" class="withdrawMoney same-change-oldstyle">
        <div class="same-head-box" style="border-bottom:0px">
            <div class="saem-seat-box">
                <div class="saem-seat-left">
                    <span>当前位置：</span>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/fundsManagement' }">业绩管理</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/withdrawdeposit' }">余额提现</el-breadcrumb-item>
                        <el-breadcrumb-item>提现</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="saem-seat-right">
                    <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
                    <button class="same-search-btns" @click="returnBack">返回</button>
                </div>
            </div>
        </div>

        <div class="gray-line"></div>
        <div class="withdraw-wrapper">
            <div class="withdraw-card">
                <div class="withdraw-cell">
                    <span>账户余额（元）</span>
                    <span>{{userbalance|filterNumber}}</span>
                </div>
                <div class="withdraw-record-btn" @click="navWithdrawRecord()">
                    <i class="el-icon-money"></i>
                    提现记录
                </div>
            </div>

            <div class="ipt-row first-row" v-if="isShow">
                <el-button type="danger" plain size="medium" @click="set_url">
                    去设置账户</el-button>
            </div>

            <template v-else>
                <div class="ipt-row first-row">
                    <span class="ipt-label">提现至</span>
                    <el-select style="flex:1" size="medium" v-model="backType" placeholder="请选择"
                        @change='choosedbacktype($event)'>
                        <el-option v-for="item in backtion" :key="item.value" :label="item.label " :value="item.value">
                            <div class="option-cell">
                                <span>{{item.label}}</span>
                                <el-image v-if="item.img" :src="item.img"></el-image>
                            </div>
                        </el-option>
                    </el-select>
                </div>

                <div class="ipt-row">
                    <span class="ipt-label">提现金额</span>
                    <el-input size="medium" v-model="input" max="10" placeholder="请输入提现金额">
                    </el-input>
                    <span class="row-unit">元</span>
                </div>

                <div class="ipt-row">
                    <span class="ipt-label">短信验证码</span>
                    <el-input size="medium" v-model="input1" maxlength="11" placeholder="请输入短信验证码"></el-input>
                    <el-button class="verify-code" :disabled="send_ed" @click="getverify()" size="medium" type="primary">
                        <template v-if="!send_ed">{{smcodetitle}}</template>
                        <template v-else>{{count_ti}}秒后重新获取</template>
                    </el-button>

                </div>
                <el-button size="medium" @click="affirm()" type="primary" class="withdraw-confirm">发起提现</el-button>
            </template>
            <div class="withdraw-rule">
                <p>常见问题:</p>
                <p>如需提现到微信零钱，请在小程序端操作提现。</p>
                <p>如果银行信息或发票填写错误，导致提现失败，资金将退回到你的账户余额。</p>
            </div>
        </div>


        <!-- <div class="drawBox">
            <h4 class="four">账户余额提现</h4>
            <form action="" method="get" accept-charset="utf-8">
                <div class="listsBox">
                    <span class="span_l">提现至:</span>
                    <el-select v-model="backType" placeholder="请选择" @change='choosedbacktype($event)'>
                        <el-option v-for="item in backtion" :key="item.value" :label="item.label " :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="danger" style="margin-left:10px" plain v-if="isShow" size="mini" @click="set_url">
                        去设置账户</el-button>
                </div>
                <div class="listsBox">
                    <span class="span_l">账户金额:</span>
                    <span class="balanshow">{{userbalance|filterNumber}}</span>元
                </div>
                <div class="listsBox tixian">
                    <span class="span_l">提现金额:</span>
                    <el-input v-model="input" placeholder="请输入提现金额" maxlength="9"></el-input>
                    元
                </div>
                <div class="listsBox verifyBox">
                    <span class="span_l">短信验证码:</span>
                    <el-input v-model="input1" maxlength="6"></el-input>
                    <button v-if="!send_ed" class="btnb_s" @click="getverify()" type="button">{{smcodetitle}}</button>
                    <button v-if="send_ed" class="btnb_s btnb_s_other" type="button">{{count_ti}}秒后重新获取</button>
                </div>
                <div class="othersize" v-if="send_ed">
                    验证码已发送到你绑定的手机号码:+86{{phonenum}},请注意查收
                </div>
                <div class="listsBox">
                    <button class="btn_affirm" @click="affirm()" type="button">确认</button>
                </div>
                <div class="state">
                    <p>常见问题</p>
                    <p>1、如果银行信息或发票填写错误，导致提现失败，资金将退回到你的账户余额</p>
                </div>
            </form>
        </div> -->
    </div>
</template>
<script>
    import { bankCardAttribution } from '../../bankCradMsg.js'
    export default {
        name: 'withdrawMoney',
        data: function () {
            return {
                input: '',//input框
                input1: '',//input验证码
                backType: '',//银行卡类别
                backlist: [],//卡信息列表
                backtion: [],
                userbalance: '',//总金额
                phonenum: '',//手机号码
                send_ed: false,//tiam
                count_ti: '',
                timer: null,
                smcodetitle: '获取验证码',
                isShow: false
            }
        },
        computed: {},
        // 初始化执行
        created: function () {
            this.backList();
            this.getPartnerQuota();
        },
        inject: [
            'reload'
        ],
        methods: {
            //跳转到提现记录
            navWithdrawRecord() {
                this.$router.push({ path: "/withdrawdeposit" })
            },

            RefreshFun() {
                // 调用reload方法，刷新整个页面
                this.reload()
            },
            //返回
            returnBack() {
                this.$router.back(-1);
            },
            //获取验证
            getverify() {
                this.getphone();//获取验证码;
            },
            //确认
            affirm: function () {
                var regPos = /^\d+(\.\d+)?$/; //非负浮点数
                var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
                if (this.backType == '') {
                    this.$message.error('请选择提现账户');
                    return false;
                } else if (this.input % 10 != 0 || this.input < 50) {
                    this.$message.error('提现金额不能小于50,且是10的倍数');
                    return false;
                } else if (this.input1 == '') {
                    this.$message.error('验证不能为空');
                    return false;
                } else if (parseInt(this.input) > parseInt(this.userbalance)) {
                    this.$message.error('提现金额不能大于当前余额');
                    return false;
                }
                this.launchApplication();
            },
            //订单类型
            choosedbacktype(Type) {
                this.back_ID = Type;
            },
            // 获取银行卡列表
            backList() {
                this.$post({
                    url: 'Partner/Bank/getBankList',
                    success: res => {
                        if (res.code > 0) {
                            let list = [];
                            res.data.forEach(item => {
                                if (item.type == 1) {
                                    let end_num = item.p_sn_whole.substr(-4);
                                    let bankRelation = bankCardAttribution(item.p_sn_whole);
                                    console.log(bankRelation)
                                    list.push(
                                        {
                                            value: item.bank_id,
                                            label: `${item.bank_name}（尾号${end_num}）`,
                                            img: typeof bankRelation == "object" ? `https://apimg.alipay.com/combo.png?d=cashier&t=${bankRelation.bankCode}` : ''
                                        }
                                    )
                                }
                            });
                            if (list.length == 0) {
                                this.isShow = true;
                            } else {
                                this.backtion = list;
                            }
                        } else {
                            this.$message.error(res.message);
                        }
                    }, error: e => {
                        this.$message.error("网络错误");
                    }
                })
            },



            //获取手机号码和余额
            getPartnerQuota() {
                var that = this;
                // ajax请求
                that.$post({
                    url: 'Partner/WaterCard/getPartnerQuota',
                    data: {},
                    success: (data) => {
                        if (data.code == 1000) {
                            that.phonenum = data.data.tel;//手机号码
                            that.userbalance = data.data.account_balance;//用户金额
                        }
                    }
                })
            },
            //获取验证码 /Common/Common/sendSms
            getphone() {
                var that = this;
                var phonenum = that.phonenum;
                const time_count = 120;
                if (phonenum == '') {
                    this.$message.error('手机信息有误请联系管理员');
                    return false;
                }
                // ajax请求
                that.$post({
                    url: '/Common/Common/sendSms',
                    data: { phone: phonenum },
                    success: (data) => {
                        if (data.code == 1000) {
                            that.$message.success(data.message);
                            that.send_ed = true;
                            if (!that.timer) {
                                that.count_ti = time_count;
                                that.send_ed = true;
                                that.timer = setInterval(() => {
                                    if (that.count_ti > 0 && that.count_ti <= time_count) {
                                        that.count_ti--;
                                    } else {
                                        that.send_ed = false;
                                        that.smcodetitle = '重新获取';
                                        clearInterval(that.timer);
                                        that.timer = null;
                                    }
                                }, 1000);
                            }
                        } else {
                            this.$message.error(data.message);
                        }
                    }
                })
            },
            //提交申请
            launchApplication() {
                var that = this;
                // ajax请求
                that.$post({
                    url: 'Partner/Achievement/launchApplication',
                    data: {
                        bank_id: that.back_ID,
                        money: that.input,
                        phone: that.phonenum,
                        code: that.input1,
                    },
                    success: (data) => {
                        if (data.code == 1000) {
                            this.$message.success('申请成功');
                            that.getPartnerQuota();//重新调取余额

                            //重置数据
                            that.backType = '';
                            that.input = '';
                            that.input1 = '';
                            that.send_ed = false;
                        } else {
                            this.$message.error(data.message);
                        }
                    }
                })
            },
            set_url() {
                this.$router.push('/accountsetting')
            }
        },
        mounted() {

        }
    }
</script>
<style>
    .withdrawMoney {
        width: 100%;
        height: 100%;
        /*background: #F2F3F3;*/
    }

    .drawBox {
        display: flex;
        flex-direction: column;
        padding: 0px 40px;
    }

    .drawBox form .listsBox {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 10px 0px;
    }

    .listsBox .span_l {
        width: 90px;
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
    }

    .listsBox .el-dropdown {
        background: #fff;
    }

    .listsBox .balanshow {
        color: #D81F2A;
    }

    .tixian .el-input {
        background: #fff;
        width: 200px;
        height: 30px;
        margin-right: 10px;
    }

    .listsBox .el-input__inner {
        width: 200px;
        height: 40px;
    }

    .othersize {
        font-size: 12px;
        color: #9B9A98;
    }

    .verifyBox .el-input {
        background: #fff;
        width: 120px;
        height: 40px;
    }

    .verifyBox .el-input__inner {
        width: 120px;
        height: 40px;
    }

    .verifyBox .btnb_s {
        border: none;
        padding: 0 5px;
        height: 40px;
        color: #fff;
        font-size: 14px;
        background: #275485;
        margin-left: 15px;
        border-radius: 4px;
    }

    .btnb_s_other {
        background: #A8AFB3 !important;
    }

    .listsBox .btn_affirm {
        width: 130px;
        border: none;
        height: 30px;
        color: #fff;
        font-size: 14px;
        background: #275485;
        margin: 30px 0px 0px 90px;
        border-radius: 4px;
    }

    .state {
        border: 1px solid #C9CAC9;
        color: #585453;
        font-size: 12px;
        padding: 20px;
    }

    .state>p {
        margin-top: 5px;
    }
</style>

<style scoped>
    .gray-line {
        background: #FAFAFA;
        height: 15px;
    }

    .withdraw-wrapper {
        padding: 30px;
    }

    .withdraw-card {
        width: 400px;
        height: 120px;
        background: #FFFFFF;
        box-shadow: 0px 2px 6px 0px rgba(0, 35, 77, 0.1);
        border-radius: 6px;
        position: relative;
        overflow: hidden;
    }

    .withdraw-card::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        background: #2C5586;
        border-radius: 50%;
        left: -275px;
        top: 50%;
        transform: translateY(-50%);
    }

    .withdraw-cell {
        display: flex;
        flex-flow: wrap column;
        color: #2C5586;
        height: 100%;
        justify-content: center;
        margin-left: 80px;
    }

    .withdraw-cell span:first-child {
        font-size: 14px;
    }

    .withdraw-cell span:last-child {
        font-size: 32px;
        margin-top: 5px;
        font-weight: 500;
    }

    .withdraw-record-btn {
        position: absolute;
        right: 10px;
        top: 15px;
        color: #2C5586;
        cursor: pointer;
        font-size: 15px;
    }

    .withdraw-record-btn::after {
        content: "";
        border-bottom: 1px #2C5586 solid;
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 60px;
    }

    .ipt-label {
        width: 80px;
        flex-shrink: 0;
        text-align: justify;
        text-align-last: justify;
        margin-right: 20px;
    }



    .ipt-row {
        width: 400px;
        display: flex;
        margin-top: 20px;
        align-items: center;
        position: relative;
    }

    .row-unit {
        position: absolute;
        right: 10px;
        color: #333333;
        font-size: 14px;
    }

    .first-row {
        margin-top: 40px;

    }

    .verify-code {
        margin-left: 10px;
    }

    .withdraw-confirm {
        margin-top: 30px;
        width: 100px;
    }

    .withdraw-rule {
        margin-top: 40px;
        background: #FAFAFA;
        width: 600px;
        padding: 20px;
        color: #333333;
        font-size: 14px;
        line-height: 26px;
    }

    .option-cell {
        display: flex;
        align-items: center;
    }
</style>
